<template>
  <el-config-provider :locale="zhCn">

    <el-container class="app-container">
      <el-header class="site-header">
        <div class="container header-container">
          <router-link to="/" class="logo-container">
            <img src="../public/logo.jpg" alt="lcp" class="logo" />
            <div class="site-title">lcp's Blog</div>
          </router-link>

          <el-menu class="main-nav" mode="horizontal" :ellipsis="false" :router="true" :default-active="$route.path"
            background-color="transparent" text-color="var(--color-text)" active-text-color="var(--color-primary)">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/posts">文章</el-menu-item>
            <el-menu-item index="/project">项目</el-menu-item>
            <el-menu-item index="/tags">标签</el-menu-item>
            <el-menu-item index="/tool">工具</el-menu-item>
            <el-menu-item index="/softwareCopyright">软著代理服务</el-menu-item>
            <el-menu-item index="/service">作业、毕设服务</el-menu-item>
            <el-menu-item index="/about">关于</el-menu-item>
            <el-menu-item @click="goAdmin" index="">后台</el-menu-item>
          </el-menu>
          <div class="header-actions">
            <SearchComponent ref="searchComponent" />
            <EmailLogin class="login-component" />
            <ThemeToggle />
          </div>
        </div>
      </el-header>

      <el-main class="site-main">
        <div class="container">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>

      <el-footer class="site-footer">
        <div class="container">
          <div class="footer-content">
            <div class="footer-links">
              <router-link to="/links" class="footer-link">友情链接</router-link>
              <router-link to="/history" class="footer-link">本站历史</router-link>
              <router-link to="/projects" class="footer-link">关于项目</router-link>
              <router-link to="/rss" class="footer-link">RSS</router-link>
              <router-link to="/sitemap" class="footer-link">网站地图</router-link>
              <router-link to="/feedback" class="footer-link">反馈建议</router-link>
              <router-link to="/support" class="footer-link">支持我们</router-link>
              <a href="https://github.com/lcp" target="_blank" class="footer-link">GitHub</a>
            </div>

            <div class="footer-copyright">
              Powered by <a href="https://gitee.com/lcp20010801" target="_blank">Lcpblog</a> · A Blog Framework for
              Developers
              <br />
              Copyright © 2022 - {{ new Date().getFullYear() }} lcp All rights reserved.
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>

    <BackToTop />
  </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { onMounted } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import SearchComponent from './components/SearchComponent.vue'
import ThemeToggle from './components/ThemeToggle.vue'
import BackToTop from './components/BackToTop.vue'
import EmailLogin from './components/EmailLogin.vue';
// 初始化主题时添加初始类
onMounted(() => {
  // 检查本地存储的主题偏好
  const savedTheme = localStorage.getItem('theme')

  if (savedTheme === 'dark') {
    document.documentElement.classList.add('dark-theme')
  } else if (savedTheme === 'light') {
    document.documentElement.classList.remove('dark-theme')
  } else {
    // 如果没有保存的偏好，检查系统偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    if (prefersDark) {
      document.documentElement.classList.add('dark-theme')
    }
  }
})
const goAdmin = () => {
  window.open("https://admin.giaocode.cn/home")
};
</script>

<style>
/* 引入基础样式 */
@import './assets/main.css';

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 站点布局 */
.app-container {
  min-height: 100vh;
}

/* 站点Header样式 */
.site-header {
  padding: 0;
  background-color: var(--color-card);
  box-shadow: 0 1px 3px var(--color-shadow);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  height: auto !important;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Element Plus Menu Override */
.main-nav {
  border: none !important;
  background-color: transparent !important;
}

.main-nav :deep(.el-menu-item) {
  font-size: 0.95rem;
  transition: color 0.3s;
  padding: 0 1rem;
}

.main-nav :deep(.el-menu-item.is-active) {
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-component {
  margin: 0 15px;
}

/* 主要内容区域 */
.site-main {
  background-color: var(--color-background);
  transition: background-color 0.3s ease;
  padding: 2rem 0;
}

/* 站点Footer样式 */
.site-footer {
  padding: 2rem 0;
  background-color: var(--color-card);
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  height: auto !important;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.footer-link {
  color: var(--color-text-light);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-copyright {
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.6;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    height: auto;
    padding: 1rem 0;
    gap: 0.5rem;
  }

  .main-nav {
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 0 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav :deep(.el-menu-item) {
    padding: 0 0.75rem;
    flex-shrink: 0;
  }

  .header-actions {
    width: 100%;
    justify-content: center;
    padding-top: 0.5rem;
  }

  .footer-links {
    gap: 0.75rem;
  }
}
</style>
